<!--Favorite收藏夹-->
<template>
    <div class='favorite'>
        <div class="favorite-header">
            <mt-header title="收藏夹">
                <router-link to="/my" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
            </mt-header>
        </div>
        <div class="favorite-nav">
            <mt-navbar v-model="selected">
                <mt-tab-item id="1" size='16'>商品</mt-tab-item>
                <mt-tab-item id="2">店铺</mt-tab-item>
            </mt-navbar>
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <div class="info-list">
                        <ul>
                            <router-link :to="{path:'/product_details',query:{ id:item.goods_id}}" tag="li"
                                         v-for="(item,key) in details" :key='key'>
                                <img :src="item.cover_url" alt="">
                                <p v-text="item.title"></p>
                                <span></span>
                                <strong v-text="item.price"></strong>
                            </router-link>
                            <div class="cb"></div>
                        </ul>
                    </div>
                    <div class="cb"></div>
                    <div class="footer">
                        <p>暂无更多</p>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <div class="info-content">
                        <ul>
                            <router-link :to="{path:'/stylist_shop',query:{ id:item.shop_id }}" tag="li" v-for='(item,key) in merchant' :key='key'>
                                <div class="info-left">
                                    <img :src="item.shop_logo">
                                    <span>{{item.shop_name}}</span>
                                </div>
                                <div class="info-right">
                                    <span>查看</span><i>></i>
                                </div>
                            </router-link>
                            <div class='clearfix'></div>
                        </ul>
                    </div>
                    <div class="cb"></div>
                    <div class="footer">
                        <p>暂无更多</p>
                    </div>
                </mt-tab-container-item>
            </mt-tab-container>


        </div>
    </div>
</template>
<script typy="text/ecmascript-6">
    export default {
        data (){
            return {
                selected: '1',
                details: [],
                merchant: []
            }
        },
        created (){
            const that = this;
            const url = that.getUrl('home/collect_goods');
            const url1 = that.getUrl('home/collect_merchant');
            const params = {
                token: that.getToken()
            }
            that.$http.post(url, params, {emulateJSON: true}).then(function (res) {
                if (res.data.code === 0) {
                    that.details = res.data.data;
                } else {
                    that.$messagebox('提示', res.data.errMsg);
                }
            }, function (err) {
                that.$messagebox('提示', '找不到服务器，请重新尝试');
            })
            that.$http.post(url1, params, {emulateJSON: true}).then(function (res) {
                if (res.data.code === 0) {
                    that.merchant = res.data.data;
                } else {
                    that.$messagebox('提示', res.data.errMsg);
                }
            }, function (err) {
                that.$messagebox('提示', '找不到服务器，请重新尝试');
            })
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../../lib/less/variable";

    .favorite {
        .favorite-header {
            header {
                background: #fff;
                color: #666;
            }
            .mb(5);
        }
        .info-list {
            .mt(5);
            width: 100%;
            background: #fff;
            ul {
                li {
                    width: 50%;
                    float: left;
                    box-sizing: border-box;
                    .padding(5, 5);
                    text-align: center;
                    img {
                        width: 100%;
                    }
                    p {
                        /*控制标签文字一行显示*/
                        display: block; /*内联对象需加*/
                        word-break: keep-all; /* 不换行 */
                        white-space: nowrap; /* 不换行 */
                        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
                        text-overflow: ellipsis; /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
                        .fs(12);
                    }
                    span {
                        display: inline-block;
                        width: 100%;
                        .h(1);
                        border: 1px solid #ccc;
                    }
                    strong:before {
                        content: "￥";
                        color: #0F7ADA;
                    }
                    strong {
                        color: #0F7ADA;
                        .fs(16)
                    }

                }
                li:nth-child(odd) {
                    .pl(10)
                }
                li:nth-child(even) {
                    .pr(10)
                }

            }
        }
        .info-content {
            .mt(5);
            width: 100%;
            background: #fff;
            ul {
                li {
                    width: 100%;
                    .h(60);
                    box-shadow: 0px 0px 5px 2px #aaa;
                    .mb(10);
                    .info-left {
                        width: 50%;
                        float: left;
                        .lh(60);
                        box-sizing: border-box;
                        display: inline-block;
                        span {
                            .fs(14);
                        }
                        img {
                            border-radius: 50%;
                            vertical-align: middle;
                            .h(40);
                            .w(40);
                            .ml(10);
                            .mr(10);
                        }
                    }
                    .info-right {
                        width: 50%;
                        height: 100%;
                        .lh(58);
                        float: left;
                        display: inline-block;
                        text-align: right;
                        .fs(14);
                        span {
                            color: #57B6E8;
                        }
                        i {
                            font-style: normal;
                            .fs(20);
                            color: #ccc;
                            vertical-align: middle;
                            .ml(20);
                            .mr(10);
                        }
                    }
                }
            }
        }
    }
</style>
